<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>modelList</title>

    <link rel="stylesheet" href="../style/bootstrap.min14ed.css"/>
    <link rel="stylesheet" href="../style/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="../style/sweetalert.css"/>
    <link href="../style/font-awesome.min93e3.css" rel="stylesheet">

    <link href="../style/kendo.common.min.css" rel="stylesheet">
    <link href="../style/kendo.default.min.css" rel="stylesheet">
    <link href="../style/kendo.default.mobile.min.css" rel="stylesheet">
    <link href="../style/examples-offline.css" rel="stylesheet">
    <script src="../js/env.js"></script>
    <style>
        body {
            padding: 20px;
        }
        .fixed-table-body {
            height: 560px;
            overflow: auto;
        }
        .k-switch:hover {
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="row" style="padding: 10px">
    <a href="modelList.html">范本管理</a>>><span>客户管理</span>
</div>
<table id="tbl_model"></table>

<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-table.min.js"></script>
<script src="../js/bootstrap-table-zh-CN.min.js"></script>
<script src="../js/sweetalert.min.js"></script>
<script src="../js/kendo.all.min.js"></script>
<script>
    function refresh() {
        $('#tbl_model').bootstrapTable("refresh");
    }

    $("#tbl_model").on('load-success.bs.table', function () {
        refSwitch();
    });
    $('#tbl_model').bootstrapTable({
        url: requestUrl+'/modelClients',//远程数据请求地址
        striped: true,//隔行变色
        pagination: true,//显示分页条
        queryParams: queryParams,
        sidePagination: "server",
        pageSize: 10,//单页记录数
        pageList: [10, 15, 20],//分页步进值
        columns: [{
            field: 'clientName',
            title: '客户名称',
            align: 'center'
        }, {
            title: '使用状态',
            align: 'center',
            formatter: function (value, row, index) {

                var ele = '<input hidden type="checkbox" _id="' + row.id + '" _clientId="' + row.clientId + '" class="notifications-switch" />';
                if (row.id != null) {
                    ele = '<input hidden type="checkbox" _id="' + row.id + '" _clientId="' + row.clientId + '" class="notifications-switch" checked/>';
                }
                return ele;
            }
        }]
    });
    function queryParams(params) {
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            offset: params.offset,  //页码
            pageSize: this.pageSize,
            modelId: localStorage.modelId
        };
        return temp;
    }
    function refSwitch() {
        // 使用增加、删除来控制是否关联
        $(".notifications-switch").kendoMobileSwitch();
        $(".k-switch").click(function () {
            var $a = $(this).find("input");
            var clientId = $a.attr("_clientId");
            if ($(this).hasClass("km-switch-on") == true) {
                $.post(requestUrl+"/modelClient", {"modelId":localStorage.modelId,"clientId":clientId}, function (data) {
                    $a.attr("_id",data);
                });
            }else{
                var id = $(this).find("input").attr("_id");
                $.post(requestUrl+"/delModelClient",{id:id});

            }
        })
    }


</script>
</body>
</html>